<template>
  <div class="container-unitAudit">
    <el-row>
      <el-form :model="form"
               :inline="true">
        <el-col :span="24">
          <el-col :span="8">
            <el-form-item label="申请日期"
                          label-width="100px"
                          id="headerTime">
              <el-date-picker v-model="form.timeArr"
                              type="datetimerange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              @change="onChangeTime">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="单位名称"
                          label-width="100px"
                          id="headerUnit">
              <el-input v-model="form.unitName"
                        placeholder="请输入单位名称">

              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="审核结果"
                          label-width="100px"
                          id="headerResult">
              <el-select v-model="form.result"
                         placeholder="请选择">
                <el-option label="全部"
                           value=""></el-option>
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.name"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button class="header-search"
                       type="primary"
                       @click="onSearch">查询</el-button>
          </el-col>
        </el-col>
        <el-col class="table-container"
                :span="24">
          <div class=" el-table__body-wrapper is-scrolling-none">
            <el-table ref="versionTable"
                      :data="tableData"
                      border
                      :highlight-current-row="true"
                      @current-change="handleVersionChange"
                      :header-cell-style="{background:'#f5f5f5'}"
                      @row-click="openDetails"
                      class="table-width">
              <el-table-column prop="company_name"
                               label="单位名称"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>

              <el-table-column prop="contact_name"
                               label="负责人"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="contact_phone"
                               label="联系电话"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="create_date"
                               label="申请时间"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="check_date"
                               label="审核时间"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="status_name"
                               label="审核结果"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="操作"
                               width="200px"
                               icon="el-icon-edit"
                               align="center">
                <template slot-scope="scope">
                  <el-button type="text"
                             @click="onAutideModify(scope.row)"
                             :disabled="scope.row.status=='1'?false:true">修改</el-button>
                  <el-button type="text"
                             @click="onAutide(scope.row)"
                             :disabled="scope.row.status=='1'?false:true">审核</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="24"
                class="footer-box">
          <el-pagination id="pagination"
                         @current-change="handleCurrentChange"
                         :current-page="page"
                         :page-size="pagesize"
                         :page-sizes="[10]"
                         background
                         layout="total,sizes,prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { UnitAuditApi } from "@/services/orgainzeManage"
export default {
  data () {
    return {
      currentVal: null,
      page: 1,
      pagesize: 10,
      total: 0,
      tableData: [],
      start_time: '',
      end_time: '',
      form: {
        timeArr: [],
        unitName: '',
        result: '',
      },
      options: [],
    }
  },
  methods: {
    //修改
    onAutideModify (row) {
      this.$router.push({ path: '/AuditModify', query: { company_apply_id: row.company_id } });
    },
    //时间发生变化时触发的事件
    onChangeTime (val) {
      if (val == null) {
        this.start_time = '';
        this.end_time = '';
      } else {
        this.start_time = val[0];
        this.end_time = val[1];
      }
    },
    //当前页面改变时触发的事件
    handleCurrentChange (page) {
      this.page = page;
      this.getUnitAudit()
    },
    //任意点击表格的行触发的事件
    openDetails (row) {

    },
    //审核
    onAutide (row) {
      this.$router.push({ path: '/auditDetails', query: { company_apply_id: row.company_id } })
      console.log(row)
    },
    //查询
    onSearch () {
      this.page = 1;
      this.getUnitAudit()
    },
    //获取单位审核列表数据
    getUnitAudit () {
      UnitAuditApi.getSettledList({
        params: {
          unit_name: this.form.unitName,
          page: this.page,
          is_page: 1,
          page_size: this.pagesize,
          user_id: window.localStorage.user_id,
          start_time: this.start_time,
          end_time: this.end_time,
          check_result: this.form.result
        }
      }).then((res) => {
        this.tableData = res.data.list;
        if (this.tableData.length != 0) {
          this.setCurrent(this.tableData[0]);
        }
        this.total = res.data.total_count;
      }).catch((error) => {
        console.log(error)
      })
    },
    //改变当前行的背景色
    handleVersionChange (val) {
      this.currentVal = val;
    },
    setCurrent (row) {
      this.$refs.versionTable.setCurrentRow(row);
    },
    //审核结果列表数据渲染
    getcheckData () {
      UnitAuditApi.getcheckData({
        params: {
          code_type: 'apprResult',
          is_page: 0
        }
      }).then((res) => {
        this.options = res.data.list;
        console.log('状态码', res)
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  created () {
    //审核结果列表数据渲染
    this.getcheckData()
    //获取单位审核列表数据
    this.getUnitAudit()
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-table__body-wrapper tr.current-row > td .el-button {
  color: #fff;
}
/deep/ .current-row > td {
  background: #1890ff !important;
  color: white;
}
.footer-box {
  text-align: center;
  margin-top: 20px;
}
#headerResult {
  width: 100% !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/deep/ .el-select {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-right: 20px;
}
#headerUnit {
  width: 100% !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-right: 20px;
}
#headerTime {
  width: 100% !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-right: 20px;
}
/deep/.el-date-editor .el-range-separator {
  padding: 0 px;
  line-height: 32px;
  width: auto;
  color: #303133;
}
/deep/ .el-range-editor.el-input__inner {
  width: 100% !important;
}
.container-unitAudit {
  padding: 20px;
  background: white;
  height: 100%;
  .el-row {
    height: 100%;
    .el-form {
      display: flex;
      flex-direction: column;
      height: 100%;
      .table-container {
        flex: 1;
        overflow: hidden;
        .el-table__body-wrapper {
          height: 100%;
          .el-table {
            height: 100%;
            overflow-y: scroll;
          }
        }
      }
    }
  }
}
.header-search {
  width: 100% !important;
}
</style>

